<template>
  <page-wrap2 scrollType="bs" :initBs="initBs" :load="loadData">
    <template v-slot:extension>

    </template>
    <template v-slot:RollingLow>
      <TimeChange @select="onSelectTimeChange" v-if="ls.get('ORG_CODE') != '0015'"></TimeChange>
      <z-tab
        v-model:active="tabActive"
        :tabList="tabList"
        top="2"
        @click-tab="onClickTab"
      ></z-tab>
      <div class="performance-container-select">
        <div class="select-item" @click="groupShow = true">
          {{ groupObj.text }}
          <div class="select-item-icon"></div>
        </div>
        <!-- <div class="select-item" @click="rankShow = true">
          {{ rankObj.text }}
          <div class="select-item-icon"></div>
        </div> -->
        <div class="select-item" @click="userShow = true">
          {{ userObj.text }}
          <div class="select-item-icon"></div>
        </div>
      </div>
      <!-- <div class="performance-container-select">
        <div class="select-item" @click="departmentShow = true">
          {{ pickShow[0].text }}
          <div class="select-item-icon"></div>
        </div>
        <div class="select-item" @click="departmentShow = true">
          {{ pickShow[1].text }}
          <div class="select-item-icon"></div>
        </div>
        <div class="select-item" @click="departmentShow = true">
          {{ pickShow[2].text }}
          <div class="select-item-icon"></div>
        </div>
      </div> -->
      <!-- <van-picker title="标题" :columns="columns" /> -->
    </template>
    <div class="performance-container">
      <div class="performance-container-all">
        <div class="all-item">
          <div class="all-item-upper">{{ allInfo.roomCount }}</div>
          <div class="all-item-below">桌台数</div>
          <div class="all-item-line"></div>
        </div>
        <div class="all-item">
          <div class="all-item-upper">{{ allInfo.validtabRoomCount }}</div>
          <div class="all-item-below">开台数</div>
          <div class="all-item-line" style="transform: scale(1.5)"></div>
        </div>
        <div class="all-item">
          <div class="all-item-upper">{{ allInfo.summaryTotalAmtData }}</div>
          <div class="all-item-below">参与抽成金额</div>
          <div class="all-item-line"></div>
        </div>
        <div class="all-item">
          <div class="all-item-upper" style="color: #FFAA00;">{{ allInfo.summaryData }}</div>
          <div class="all-item-below">所得抽成</div>
        </div>
      </div>
      <div class="performance-container-main">
        <van-list v-model:loading="loading" :finished="finished" finished-text="没有更多了">
          <div class="performance-main-item" v-for="(item, index) in itemInfo" :key="index" @click="jump(item)">
            <div class="main-item-upper">
              <div class="upper-left">
                <span>开台时间：</span><span>{{ dayjs(item.startTime).format('YYYY-MM-DD') }}</span>
              </div>
              <div class="upper-right">{{ item.roomName }}</div>
            </div>
            <div class="main-item-sale">
              <div class="sale-left">
                消费金额： <span class="color-FFAA00">{{ item.consumeAmt }}元</span>
              </div>
              <!-- <div class="sale-right">
                优惠：{{ item.ticket }}
              </div> -->
            </div>
            <div class="main-item-below">
              <div class="below-parts" :class="postForm.planType == '1'?'spe':''">
                <div class="below-parts-value">{{ item.addCommissionAmt }}</div>
                <div class="below-parts-title">参与抽成金额</div>
                <div class="below-parts-line"></div>
              </div>
              <div class="below-parts" :class="postForm.planType == '1'?'spe':''" v-if="postForm.planType == '0'">
                <div class="below-parts-value">{{ formatDecimal(item.commrate * 100) }}</div>
                <div class="below-parts-title">抽成比例 (%)</div>
                <div class="below-parts-line"></div>
              </div>
              <div class="below-parts" :class="postForm.planType == '1'?'spe':''">
                <div class="below-parts-value">{{ item.commissionAmt }}</div>
                <div class="below-parts-title">所得抽成金额</div>
              </div>
            </div>
          </div>
        </van-list>
      </div>
    </div>
  </page-wrap2>
  <z-picker v-model:show="groupShow" :columns="groupColumns" title="营销组" @confirm="onGroupConfirm($event, 'department')" />
  <!-- <z-picker v-model:show="rankShow" :columns="rankColumns" title="职级" @confirm="onRankConfirm($event, 'department')" /> -->
  <z-picker v-model:show="userShow" :columns="userColumns" title="营销人员" @confirm="onUserConfirm($event, 'department')" />
  <!-- 级联选择套餐 -->
  <!-- <z-popup v-model:show="departmentShow" closeable :style="{width: '334px'}" title="选择">
      <van-picker  :columns="columns" />
    </z-popup> -->
  <!-- <z-picker v-model:show="departmentShow" :columns="columns" title="部门" @confirm="onConfirm($event, 'department')" /> -->
  <!-- <z-picker
    v-model:show="departmentShow1"
    :columns="departmentColumns"
    title="部门"
    @confirm="onConfirm($event, 'department')"
  />
  <z-picker
    v-model:show="levelShow"
    :columns="levelColumns"
    title="层级"
    @confirm="onConfirm($event, 'level')"
  />
  <z-picker
    v-model:show="personnelShow"
    :columns="personnelColumns"
    title="人员"
    @confirm="onConfirm($event, 'personnel')"
  /> -->
</template>

<script setup>
import { formatDecimal } from '@/utils/chenhao'
import dayjs from 'dayjs'
import Api from '@/api'
import ls from '@/lib/ls'
import { transformWorkTime } from '@/utils/chenhao'
import useAppStore from '@/store/app'
const appStore = useAppStore()
const router = useRouter()

// 表单
const postForm = reactive({
  openBeginTime: transformWorkTime('今日',appStore.getReportTime.startTime,appStore.getReportTime.endTime)[0],
  openEndTime: transformWorkTime('今日',appStore.getReportTime.startTime,appStore.getReportTime.endTime)[1],
  pageIndex: 1,
  pageSize: 15,
  perCode:'', // 营销人员编码
  planType:'0', // 方案类型(0:按消费额业绩提成查询 1:按有效桌台业绩提成查询) 
})
const tabActive = ref(0)
const tabList = ref([{name:'按消费金额',value:'0'},{name:'按有效桌台',value:'1'}])
const onClickTab = (e)=>{
  if(e.name == 0){
    postForm.planType = '0'
  }else{
    postForm.planType = '1'
  }
  loadData(true)
}


// -----------------营销组弹框---------------
// 营销组 选项组
const groupColumns = ref([])
const get_waiter_options = (params) => {
  // 获取营销分组
  Api.Common.AppObjProcess.Do({
    functionName: 'GetMarketGroup',
    contentData: {}
  })
    .then(res => {
      console.log('营销组 选项组 res:>> ', res);
      const DepotList = res.result
      // 改造数组 添加picker需要的text和value
      let modifiedObjArr = DepotList.map(obj => {
        return { ...obj, text: obj.name, value: obj.code }
      })
      Array.prototype.push.apply(groupColumns.value, modifiedObjArr)
      if(groupColumns.value.length >= 1){
        postForm.groupName = groupColumns.value[0].text
        postForm.groupCode = groupColumns.value[0].value
        groupObj.value = groupColumns.value[0]
      }
      console.log(groupColumns.value);
      get_user_options()
    })
    .catch(err => {
    })
}


let groupObj = ref({ text: '营销组' })
const groupShow = ref(false)
// 弹窗确定按钮
const onGroupConfirm = function (ev, type) {
  groupObj.value = ev.selectedOptions[0]
  const opt = ev.selectedOptions ? ev.selectedOptions[0] : null
  postForm.groupName = opt.text
  postForm.groupCode = opt.value
  console.log('postForm :>> ', postForm);
  groupShow.value = false
  if (postForm.groupCode) {
    get_user_options()
  }
  // loadData(true)
}

// // -----------------职级弹框---------------
// // 职级 选项组
// const rankColumns = ref([{ text: "全部", value: "" }])
// const get_rank_options = (params) => {
//   // 获取服务员信息
//   Api.Common.AppObjProcess.Do({
//     functionName: 'GetMarketRank',
//     contentData: { groupCode: postForm.groupCode }
//   })
//     .then(res => {
//       console.log('职级 选项组 res:>> ', res);
//       const DepotList = res.result
//       // 改造数组 添加picker需要的text和value
//       let modifiedObjArr = DepotList.map(obj => {
//         return { ...obj, text: obj.name, value: obj.code }
//       })
//       Array.prototype.push.apply(rankColumns.value, modifiedObjArr)
//     })
//     .catch(err => {
//     })
// }
// // get_rank_options()

// let rankObj = ref({ text: '职级' })
// const rankShow = ref(false)
// // 弹窗确定按钮
// const onRankConfirm = function (ev, type) {
//   rankObj.value = ev.selectedOptions[0]
//   const opt = ev.selectedOptions ? ev.selectedOptions[0] : null
//   postForm.rankName = opt.text
//   postForm.rankCode = opt.value
//   console.log('postForm :>> ', postForm);
//   rankShow.value = false
//   if (postForm.rankCode) {
//     get_user_options()
//   }
//   loadData(true)
// }

// -----------------状态弹框---------------
// 营销人员 选项组
const userColumns = ref([])
const get_user_options = (params) => {
  // 获取营销人员信息
  Api.Common.AppObjProcess.Do({
    functionName: 'GetMarketUser',
    contentData: { groupCode: postForm.groupCode, rankCode: postForm.rankCode }
  })
    .then(res => {
      console.log(res,'RES123');
      if(res.isLeader){
        Array.prototype.push.apply(userColumns.value, [{ text: "全部", value: "" }])
      }
      const DepotList = res.userList
      // 改造数组 添加picker需要的text和value
      let modifiedObjArr = DepotList.map(obj => {
        return { ...obj, text: obj.name, value: obj.code }
      })
      // let newObj = { text: '全部', value: '' };
      // modifiedObjArr.unshift(newObj);

      // userColumns.value = modifiedObjArr
      Array.prototype.push.apply(userColumns.value, modifiedObjArr)
      postForm.perCode = userColumns.value[0].value
      postForm.userName =  userColumns.value[0].text
      userObj.value.text = userColumns.value[0].text
      loadData(true)
    })
    .catch(err => {
    })
}
// get_user_options()

let userObj = ref({ text: '营销人员' })
const userShow = ref(false)
// 弹窗确定按钮
const onUserConfirm = function (ev, type) {
  userObj.value = ev.selectedOptions[0]
  const opt = ev.selectedOptions ? ev.selectedOptions[0] : null
  postForm.userName = opt.text
  postForm.perCode = opt.value
  console.log('postForm :>> ', postForm);
  userShow.value = false
  loadData(true)
}



// 模拟数据
const allInfo = ref({})
const itemInfo = ref([])
const jump = item => {
  router.push({
    path: `/performance/performancedetails`,
    query: { info: JSON.stringify(item) }
  })
}


// -----------------------------------------------时间筛选-----------------------------------------------------
const onSelectTimeChange = (startTime, endTime) => {
  postForm.openBeginTime = startTime
  postForm.openEndTime = endTime
  loadData(true)
}
// -------------------------------------------------------加载  下拉刷新---------------------------------------------------------
const loading = ref(false)
const finished = ref(false)
const initBs = ref(0)
const loadData = async function (refresh = false) {
  if (refresh === true) {
    postForm.pageIndex = 1
    itemInfo.value = []
    finished.value = false
  }
  loading.value = true
  const resp = await Api.Common.AppObjProcess.Do({
    functionName: 'GetMarketList',
    contentData: postForm
  })
  console.log('业绩查询 resp :>> ', resp);
  allInfo.value = {
    summaryTotalAmtData: resp.summaryTotalAmtData,
    summaryData: resp.summaryData,
    validtabRoomCount: resp.validtabRoomCount,
    roomCount: resp.roomCount,
  }
  const nowList = resp.listData
  if (refresh === true) {
    if (nowList.length !== postForm.pageSize) {
      finished.value = true
    }
  }
  Array.prototype.push.apply(itemInfo.value, nowList)
  if (nowList.length > 0) {
    postForm.pageIndex++
  } else {
    finished.value = true
  }
  loading.value = false
  if (refresh === true) {
    initBs.value++
  }
}
// -----------------------------------------------------初始化------------------------------------------------------
const onInit = function () {
  get_waiter_options()
}
onInit()


</script>

<style scoped lang="scss">
.performance-container-select {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: #222226;
  padding: 10px 5%;
  margin: 0px 0 10px;

  .select-item {
    width: 48%;
    position: relative;
    border: 1px solid #999999;
    border-radius: 4px;
    line-height: 14px;
    padding: 8px 0px 8px 11px;
    font-size: 14px;
    font-family: PingFang SC;
    font-weight: 500;
    color: #cccccc;

    .select-item-icon {
      position: absolute;
      right: 12px;
      top: 13px;
      width: 11px;
      height: 6px;
      background-image: url('@/assets/svg/common/v_triangle_bottom_white.svg');
      background-repeat: no-repeat;
      background-position: center center;
      background-size: contain;
    }
  }
}

.performance-container {
  .performance-container-all {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: #28282e80;
    box-shadow: inset 0 0 20px rgba(63, 61, 66, 0.5);
    border-radius: 8px;
    padding: 20px 0;
    margin: 0 12px 10px;

    .all-item {
      flex-basis: 25%;
      text-align: center;
      position: relative;

      .all-item-upper {
        line-height: 14px;
        font-size: 14px;
        font-family: PingFang SC;
        font-weight: bold;
        color: #ffffff;
        padding-bottom: 18px;
      }

      .all-item-below {
        line-height: 12px;
        font-size: 12px;
        font-family: PingFang SC;
        font-weight: 500;
        color: #cccccc;
      }

      .all-item-line {
        position: absolute;
        width: 1px;
        height: 40px;
        right: 0px;
        top: 0px;
        background-image: url('@/assets/images/common/i_onwine-line.png');
        background-repeat: no-repeat;
        background-position: center center;
        background-size: cover;
      }
    }
  }

  .performance-container-main {
    padding: 0 12px;

    .performance-main-item {
      margin-bottom: 10px;
      background: #28282e;
      border-radius: 8px;

      .main-item-upper {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 16px 8px 16px 12px;
        border-bottom: 1px solid #383840;

        .upper-left {
          font-size: 13px;
          font-family: PingFang SC;
          font-weight: 500;
          color: #cccccc;
          line-height: 13px;
        }

        .upper-right {
          font-size: 24px;
          font-family: PingFang SC;
          font-weight: 500;
          color: #ffffff;
          line-height: 24px;
        }
      }

      .main-item-sale {
        display: flex;
        padding: 10px 12px 0px 12px;
        justify-content: space-between;
        align-items: center;

        .sale-left {
          font-family: PingFang SC;
          font-weight: 500;
          font-size: 16px;
          color: #FFFFFF;
        }

        .sale-right {
          font-family: PingFang SC;
          font-weight: 500;
          font-size: 12px;
          color: #CCCCCC;
          background: #383840;
          border-radius: 2px;
          padding: 4px 7px;
        }
      }

      .main-item-below {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 20px 0 12px;

        .below-parts {
          text-align: center;
          flex-basis: 33.33%;
          position: relative;
          &.spe{
            flex-basis: 50%;
          }
          .below-parts-value {
            line-height: 14px;
            font-size: 14px;
            font-family: PingFang SC;
            font-weight: bold;
            color: #ffffff;
            padding-bottom: 12px;
          }

          .below-parts-title {
            line-height: 12px;
            font-size: 12px;
            font-family: PingFang SC;
            font-weight: 500;
            color: #cccccc;
          }

          .below-parts-line {
            position: absolute;
            width: 1px;
            height: 40px;
            transform: scale(0.75);
            right: 0px;
            top: 0px;
            background-image: url('@/assets/images/common/i_onwine-line.png');
            background-repeat: no-repeat;
            background-position: center center;
            background-size: cover;
          }
        }
      }
    }
  }
}

.color-FFAA00 {
  color: #FFAA00;
}
</style>
